<template>
  <div>
    <!-- 图片 -->
    <div class="conter">
      <span class="conter-text">河北省网联可信数据空间综合服务平台</span>
    </div>
    <!-- 新闻内容 -->
    <div class="box">
      <!-- 骨架屏 -->
      <el-skeleton :loading="loading">
        <template slot="template">
          <ul class="list">
            <li v-for="item in 3" :key="item" class="list-litem">
              <div class="item">
                <el-skeleton-item
                  variant="image"
                  style="width: 350px; height: 150px"
                />
                <div class="list-text">
                  <div class="title">
                    <el-skeleton-item variant="text"  style="width: 350px;"/>
                  </div>
                  <div class="content">
                    <el-skeleton-item
                      variant="p"
                    />
                  </div>
                  <div class="foot">
                    <el-skeleton-item
                      variant="text"
                      style="width: 150px;"
                    />
                    <el-skeleton-item
                      variant="text"
                      style="width: 150px;"
                    />
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </template>
      </el-skeleton>
      <ul class="list">
        <li
          v-for="(item, index) in list"
          :key="index"
          class="list-litem"
          @click="goDetail(item.id)"
        >
          <div class="item">
            <div class="image"></div>
            <div class="list-text">
              <div class="title">
                {{ item.title }}
              </div>
              <div class="content" v-html="item.content"></div>
              <div class="foot">
                <span>{{ item.articleOrigin }}</span>
                <span>{{ item.createTime }}</span>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 分页 -->
    <div class="pagination">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum"
        :page-sizes="[1, 2, 3, 4, 5]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <div>
      <Footer></Footer>
    </div>
  </div>
</template>
<script>
import { Wenzhang } from "../api/api";
export default {
  data() {
    return {
      loading: true, // 添加加载状态
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 3,
        categoryId: "p",
      },
      list: [],
    };
  },
  methods: {
    getList() {
      this.loading = true; // 开始加载时设置为true
      Wenzhang(
        this.queryParams.pageSize,
        this.queryParams.pageNum,
        this.queryParams.categoryId
      )
        .then((result) => {
          this.list = result.data.data.records;
          this.total = result.data.data.total;
        })
        .catch((err) => {
          console.log("err", err);
        })
        .finally(() => {
          this.loading = false; // 加载完成后设置为false
        });
    },
    goDetail(id) {
      console.log("id", id);
      this.$router
        .push({
          path: "/NewsDetail",
          query: {
            id: id,
          },
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
      console.log("size", val);
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
      console.log("current", val);
    },
  },
  created() {
    this.getList();
  },
};
</script>

<style scoped lang="less">
.conter {
  height: 300px;
  background-image: url("../assets/image/Bxinxipilu.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}
.conter::after {
  content: "信息披露";
  font-size: 50px;
  color: #fff;
  position: absolute;
  top: 70px;
  left: 830px;
  white-space: pre-line;
  font-weight: 500;
}
.conter-text {
  position: absolute;
  top: 150px;
  left: 710px;
  font-size: 25px;
  color: #fff;
  border-top: solid 2px #ffffff;
}
.box {
  width: 1296px;
  margin: auto;
}

.list {
  list-style: none;
}
li:hover {
  cursor: pointer;
}
.list-litem {
  height: 180px;
  border-bottom: 2px solid rgb(231, 230, 230);
}

.item {
  display: flex;
  margin-top: 20px;
  padding-left: 20px;
}

.image {
  background-image: url("../assets/image/xinxipilu.jpg");

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 350px;
  height: 150px;
}

.list-text {
  padding-left: 20px;
  justify-content: center;
  align-content: center;
}
.title {
  font-size: 20px;
}
.content {
  height: 60px;
  width: 900px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.foot {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  color: rgb(174, 175, 176);
}
.time {
  margin-left: 800px;
}
.pagination {
  align-content: center;
  justify-content: center;
}
</style>